<template>
	<view class="step-item">
		<!-- 步骤头部 -->
		<view class="step-header">
			<view class="step-icon">🎉</view>
			<view class="step-title-main">活动发布完成</view>
			<view class="step-description">恭喜您！活动已成功发布，可以开始推广和管理了</view>
		</view>

		<!-- 成功状态卡片 -->
		<view class="success-card">
			<view class="success-icon">✅</view>
			<view class="success-title">发布成功</view>
			<view class="success-desc">您的活动已成功发布，现在可以分享给朋友们参与了</view>
		</view>

		<!-- 活动信息摘要 -->
		<view class="activity-summary">
			<view class="summary-title">活动信息</view>
			<view class="summary-item">
				<text class="label">活动名称：</text>
				<text class="value">{{ activityData.name || '活动名称' }}</text>
			</view>
			<view class="summary-item">
				<text class="label">活动状态：</text>
				<text class="value status-active">已发布</text>
			</view>
			<view class="summary-item">
				<text class="label">发布时间：</text>
				<text class="value">{{ getCurrentTime() }}</text>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="action-buttons">
			<view class="share-btn" @click="shareActivity">
				<text>分享活动</text>
			</view>
			<view class="manage-btn" @click="manageActivity">
				<text>管理活动</text>
			</view>
			<view class="activity-list-btn" @click="goToActivityList">
				<text>我的活动</text>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="bottom-buttons">
			<view class="restart-btn" @click="restartProcess">
				<text>发起新活动</text>
			</view>
			<view class="home-btn" @click="goHome">
				<text>返回首页</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		activityId: {
			type: [Number, String],
			default: null
		},
		activityState: Number,
		activityData: {
			type: Object,
			default: () => ({})
		}
	},

	methods: {
		getCurrentTime() {
			const now = new Date();
			return now.toLocaleString('zh-CN');
		},
		
		shareActivity() {
			// 分享活动逻辑
			uni.showToast({
				title: '分享功能开发中',
				icon: 'none'
			});
		},
		
		manageActivity() {
			// 跳转到活动管理页面
			uni.navigateTo({
				url: '/pages/activity/manage'
			});
		},
		
		restartProcess() {
			// 重新开始发起活动流程
			uni.showModal({
				title: '确认操作',
				content: '确定要发起新活动吗？当前页面数据将被清除。',
				success: (res) => {
					if (res.confirm) {
						this.$emit('restart');
					}
				}
			});
		},
		
		goHome() {
			// 返回首页
			uni.switchTab({
				url: '/pages/index/index'
			});
		},
		
		goToActivityList() {
			// 跳转到活动列表页面
			uni.navigateTo({
				url: '/pages/activity/release'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.step-item {
	background-color: #ffffff;
	border-radius: 8rpx;
	padding: 20rpx;
}

/* 步骤头部样式 */
.step-header {
	text-align: center;
	margin-bottom: 30rpx;
	padding-bottom: 20rpx;
	border-bottom: 1rpx solid #d5d5d5;
}

.step-icon {
	font-size: 48rpx;
	margin-bottom: 12rpx;
}

.step-title-main {
	font-size: 32rpx;
	font-weight: 500;
	color: #000000;
	margin-bottom: 8rpx;
}

.step-description {
	font-size: 24rpx;
	color: #666;
	line-height: 1.4;
}

/* 成功状态卡片 */
.success-card {
	text-align: center;
	padding: 40rpx 20rpx;
	background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
	border: 1rpx solid #c3e6cb;
	border-radius: 12rpx;
	margin-bottom: 30rpx;

	.success-icon {
		font-size: 80rpx;
		margin-bottom: 16rpx;
	}

	.success-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #155724;
		margin-bottom: 12rpx;
	}

	.success-desc {
		font-size: 24rpx;
		color: #155724;
		line-height: 1.4;
		opacity: 0.8;
	}
}

/* 活动信息摘要 */
.activity-summary {
	background: #f8f9fa;
	border-radius: 8rpx;
	padding: 20rpx;
	margin-bottom: 30rpx;
	border: 1rpx solid #e9ecef;

	.summary-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #000000;
		margin-bottom: 20rpx;
		padding-bottom: 12rpx;
		border-bottom: 1rpx solid #d5d5d5;
	}

	.summary-item {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;

		&:last-child {
			margin-bottom: 0;
		}

		.label {
			font-size: 26rpx;
			color: #666;
			min-width: 160rpx;
		}

		.value {
			font-size: 26rpx;
			color: #333;
			flex: 1;
		}

		.status-active {
			color: #0dc160;
			font-weight: 500;
		}
	}
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	justify-content: center;
	gap: 20rpx;
	margin-bottom: 30rpx;

	.share-btn,
	.manage-btn,
	.activity-list-btn {
		flex: 1;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}

	.share-btn {
		background: #007bff;
		color: #ffffff;
	}

	.manage-btn {
		background: #28a745;
		color: #ffffff;
	}

	.activity-list-btn {
		background: #6c757d;
		color: #ffffff;
	}
}

/* 底部按钮样式 */
.bottom-buttons {
	display: flex;
	justify-content: center;
	gap: 24rpx;
	padding: 40rpx 20rpx;

	.restart-btn {
		width: 331rpx;
		height: 90rpx;
		background: #fcfffe;
		border-radius: 44rpx;
		border: 2rpx solid #d5d5d5;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 32rpx;
			color: #333;
		}
	}

	.home-btn {
		width: 331rpx;
		height: 90rpx;
		background: #0dc160;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		text {
			font-size: 32rpx;
			color: #ffffff;
		}
	}
}
</style>